<template>
	<a-drawer v-model:visible="mainStore.distributemore" title="Basic Drawer" placement="right"
		@after-visible-change="afterVisibleChange" class="distribute_more" width="440px">
		<!-- 头部 -->
		<div class="top">
			<div class="left" @click="guanbiFn">
				<i class="appIcon-iconfont appIcon-xiangzuo"></i>
			</div>
			<div class="right">
				<div class="mailList" @click="communicationAdditionFn('tongxunlumoren')"
					:style="{ background: communicationAddition == 'tongxunlumoren' ? ' rgba(104,108,232,0.08)' : '#fff', color: communicationAddition == 'tongxunlumoren' ? ' #686ce8' : '#afacc7' }">
					<i class="appIcon-iconfont appIcon-tongxunlumoren"></i>通讯录
				</div>
				<div class="mailList" @click="communicationAdditionFn('yitianjiachengyuanmoren')"
					:style="{ background: communicationAddition == 'yitianjiachengyuanmoren' ? ' rgba(104,108,232,0.08)' : '#fff', color: communicationAddition == 'yitianjiachengyuanmoren' ? ' #686ce8' : '#afacc7' }">
					<i class="appIcon-iconfont appIcon-yitianjiachengyuanmoren"></i>已添加
				</div>
			</div>
		</div>
		<!-- 标题 -->
		<div class="title">办公团队应用项目</div>
		<!-- 搜索 -->
		<div class="sousuo">
			<a-input v-model:value="value1" placeholder="搜索成员" allow-clear class="distributemore_inp">
				<template #prefix>
					<i class="appIcon-iconfont appIcon-sousuo1"></i>
				</template>
			</a-input>
			<div class="queding" @click="sureFn">确认</div>
		</div>
		<!-- 列表 -->
		<div class="list">
			<div class="memberList">
				<ul v-if="communicationAddition === 'tongxunlumoren'">
					<li v-for="(sub_item, sub_index) in list" :key="sub_index"
						:class="`animate__animated animate__fadeInUp animate__delay-0${sub_index % 7}s`">
						<div class="list_list">
							<div class="left">
								<!-- <img src="../image/huishouzhan.png" alt=""> -->
								<span>12323</span>
							</div>
							<div class="right" @click="xuanzeFn">
								<i class="appIcon-iconfont appIcon-weixuanbeifen xuanze" v-if="xuanzeweixue"></i>
								<i class="appIcon-iconfont appIcon-zujianzhanshi-tubiaokuaimoren xuanze" v-else></i>
							</div>
						</div>
					</li>
				</ul>
				<ul v-else>
					<li v-for="(sub_item, sub_index) in list" :key="sub_index"
						:class="`animate__animated animate__fadeInUp animate__delay-0${sub_index % 7}s`">
						<div class="list_list">
							<div class="left">
								<!-- <img src="../image/huishouzhan.png" alt=""> -->
								<span>12323</span>
							</div>
							<div class="right" @click="xuanzeFn">
								<i class="appIcon-iconfont appIcon-weixuanbeifen xuanze" v-if="xuanzeweixue"></i>
								<i class="appIcon-iconfont appIcon-zujianzhanshi-tubiaokuaimoren xuanze" v-else></i>
							</div>
						</div>
					</li>
				</ul>

			</div>
		</div>
	</a-drawer>
</template>
<script lang="ts" setup>
import { useMainStore, useSlidesStore } from '@/store'
import { defineComponent, ref, defineEmits, reactive } from 'vue'
const mainStore = useMainStore()
const visible = ref<boolean>(false)
const communicationAddition = ref('tongxunlumoren')
const xuanzeweixue = ref(false)
const emits = defineEmits(['sureFn'])
const afterVisibleChange = (bool: boolean) => {
}
// !!!!!!!
const list = reactive(['', '', '', '', '', '', '', ''])
// !!!!!!!
// 切换通讯录/已添加  请求不同的列表
const communicationAdditionFn = (v: string) => {
	communicationAddition.value = v
}
// 选择成员
const xuanzeFn = () => {
	xuanzeweixue.value = !xuanzeweixue.value
}
// 关闭分享更多
const guanbiFn = () => {
	mainStore.$patch({ distributemore: false })
}
// 点击确定重新刷新列表 刷新父组件列表--传递选中的值
const sureFn = () => {
	emits('sureFn')
}
</script>
<style lang="scss" scoped>
.top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 37px;

	.left {
		transform: rotate(180deg);
	}

	.right {
		display: flex;
		align-items: center;

		.mailList {
			// margin: 0 5px;
			width: 100px;
			height: 30px;
			background: rgba(104, 108, 232, 0.08);
			border-radius: 15px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;

			.appIcon-iconfont {
				margin-right: 5px;
			}
		}
	}
}

.title {
	width: 176px;
	height: 24px;
	font-family: PingFangSC-Semibold;
	font-size: 22px;
	color: #413a50;
	letter-spacing: 0;
	line-height: 24px;
	font-weight: 600;
	margin-bottom: 34px;
}

.sousuo {
	display: flex;
	align-items: center;
	margin-bottom: 24px;

	.queding {
		width: 70px;
		height: 42px;
		background: #abaeff;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 18px;
		font-weight: 400;
		color: #fff;
		margin-left: 10px;
		cursor: pointer;
		transition: all 0.3s;

		&:hover {
			background-color: #686ce8;
		}
	}
}

.list {
	.memberList {
		overflow-y: scroll;
		height: calc(100vh - 327px);
		width: 478px;
		margin-left: -51px;

		ul {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			li {
				width: 376px;
				height: 92px;
				transition: all 0.3s;
				display: flex;
				justify-content: center;
				align-items: center;

				&:hover {
					width: 472px;
					background: #fff;
					box-shadow: 0 12px 20px 0 rgba(150, 152, 156, 0.26);
					border-radius: 16px;
					padding: 0px 48px;
				}

				.list_list {
					display: flex;
					align-items: center;
					width: 326px;
					justify-content: space-between;

					.left {
						margin-right: 20px;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					img {
						width: 50px;
						height: 50px;
						border-radius: 50%;
						background-color: red;
						margin-right: 20px;
					}
				}

				.xuanze {
					font-size: 24px;
					color: #686ce8;
				}
			}
		}
	}
}
</style>